<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useCircleStore } from "@/stores/index"
const circleStore = useCircleStore()
const Input = ref({
    inputText: '',
    inputTexts: '',
    imageSrc: '',
    selectedLocation: '',

})
const inputText = ref("");
const maxLength = 12;
const charCount = ref(0);
const charCounts = ref(0);
const maxLengths = 100;
const calculateLength = () => {
    // 计算输入的字符数（注意汉字占两个字符）
    charCount.value = inputText.value.length;
    // 如果超过12个汉字
    if (charCount.value > maxLength) {
        inputText.value = inputText.value.slice(0, maxLength);
        charCount.value = maxLength;
    }
};
const inputTexts = ref("");
const calculateLengths = () => {
    // 计算输入的字符数（注意汉字占两个字符）
    charCounts.value = inputTexts.value.length;
    // 如果超过12个汉字
    if (charCounts.value > maxLengths) {
        inputTexts.value = inputTexts.value.slice(0, maxLengths);
        charCounts.value = maxLengths;
    }
};
const location = ref(["北京", "上海", "广州", "深圳"]);
const selectedLocation = ref("请选择地点"); // 选择的地点
const handleLocationChange = (event: any) => {
    const index = event.detail.value;
    selectedLocation.value = location.value[index];
};
// 监听 inputText 变化，实时计算字符数
watch([inputText, inputTexts], () => {
    calculateLength();
    calculateLengths();
});
// 图片选择
const imageSrc = ref('')
const chooseImage = () => {
    uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res: UniApp.ChooseImageSuccessCallbackResult) => {
            // 确定 res.tempFilePaths 是字符串数组类型
            const tempFilePaths = res.tempFilePaths as string[]
            imageSrc.value = tempFilePaths[0]
        }
    })
}
// 保存到stores里面
const createCircle = () => {
    const newCircle = {
        name: inputText.value,
        description: inputTexts.value,
        location: selectedLocation.value,
        imageSrc: imageSrc.value
    };
    circleStore.addCircleData(newCircle);
    setTimeout(() => {
        uni.showToast({
            title: "创建成功",
            icon: 'none'
        })
    }, 400)
    uni.navigateBack()
}
onMounted(() => {
    circleStore.addCircleData
})
</script>
<template>
    <view class="viewport">
        <view class="top-box">
            <view class="image-box" @click="chooseImage">
                <image v-if="!imageSrc" src="/static/images/icon_image_large.png" mode="scaleToFill" class="imgs" />
                <image v-else :src="imageSrc" mode="scaleToFill" class="imgss" />
                <text v-if="!imageSrc" class="tex">上传</text>
            </view>
        </view>
        <view class="qu-name">
            <text class="name-box1">圈子名称</text>
            <view class="name-box2">
                <input type="text" v-model="inputText" @input="calculateLength" :maxlength="12" class="in-box1" />
                <view class="count-box1">{{ charCount }}/12</view>
            </view>
        </view>
        <view class="qu-su">
            <text class="name-box1">圈子描述</text>
            <view class="in-box2">
                <input type="text" v-model="inputTexts" @input="calculateLengths" :maxlength="100" class="in-box3" />
                <view class="su-botton">
                    <image src="/static/images/勾选按钮_login_icon_circle_def.png" mode="scaleToFill" class="img-tie " />
                    <text class="tie-zi">生成贴子并发布</text>
                    <text class="count-box2">{{ charCounts }}/100</text>
                </view>
            </view>
        </view>
        <view class="qu-di">
            <text class="name-box1">地点</text>
            <picker class="in-di" mode="selector" :range="location" @change="handleLocationChange">
                <text class="text-di">{{ selectedLocation }}</text>
                <view class=""></view>
            </picker>
        </view>
        <view class="creat-box" @click="createCircle">立即创建</view>
    </view>
</template>
<style lang="scss">
.viewport {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.top-box {
    display: flex;
    height: 200rpx;
    width: 100%;
    justify-content: center;
    align-items: center;

    .image-box {
        width: 160rpx;
        height: 160rpx;
        background: #d9d9d9;
        border-radius: 100rpx;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;

        .imgs {
            display: flex;
            width: 64rpx;
            height: 64rpx;
        }

        .imgss {
            display: flex;
            width: 160rpx;
            height: 160rpx;
            border-radius: 100rpx;
        }

        .tex {
            font-size: 24rpx;
        }

    }
}

.qu-name {
    display: flex;
    flex-direction: column;
    height: 140rpx;
    margin: 0 60rpx;

    .name-box1 {
        display: flex;
        width: 184rpx;
        height: 36rpx;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #000000;
        line-height: 36rpx;
    }

    .name-box2 {
        display: flex;
        flex-direction: row;
        margin-top: 22rpx;
        width: 630rpx;
        height: 70rpx;
        background: #efefef;
        border-radius: 40rpx;

        .in-box1 {
            height: 50rpx;
            margin-top: 10rpx;
            margin-left: 30rpx;
            text-align: left;
            font-size: 32rpx;
            line-height: 36rpx;
        }

        .count-box1 {
            margin-left: 140rpx;
            width: 80rpx;
            margin-top: 15rpx;
            height: 50rpx;
            font-size: 30rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: LEFT;
            color: #949090;
            line-height: 36rpx;
        }
    }
}

.qu-su {
    display: flex;
    height: 336rpx;
    margin: 0 60rpx;
    flex-direction: column;

    .in-box2 {
        margin-top: 20rpx;
        width: 628rpx;
        height: 280rpx;
        background: #efefef;
        border-radius: 40rpx;
        flex-direction: column;

        .in-box3 {
            margin-top: 20rpx;
            margin-left: 20rpx;
            font-size: 28rpx;
        }

        .su-botton {
            display: flex;
            flex-direction: row;
            margin-top: 160rpx;
            height: 32rpx;
            width: 100%;

            .img-tie,
            .tie-zi,
            .count-box2 {
                display: flex;
                height: 32rpx;
                font-size: 32rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #949090;
                line-height: 32rpx;
            }

            .img-tie {
                margin-left: 34rpx;
                width: 32rpx;

            }

            .tie-zi {
                margin-left: 20rpx;
                width: 300rpx;
            }

            .count-box2 {
                margin-left: 100rpx;
            }

        }
    }
}

.qu-di {
    display: flex;
    height: 140rpx;
    margin: 0 60rpx;
    flex-direction: column;

    .name-box1 {
        display: flex;
        width: 184rpx;
        height: 36rpx;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #000000;
        line-height: 36rpx;
    }

    .in-di {
        display: flex;
        flex-direction: row;
        margin-top: 22rpx;
        width: 630rpx;
        height: 70rpx;
        background: #efefef;
        border-radius: 40rpx;
    }

    .text-di {
        display: flex;
        margin-left: 30rpx;
        margin-top: 15rpx;
        height: 50rpx;
        font-size: 36rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: LEFT;
        color: #949090;
        line-height: 36rpx;
    }
}

.creat-box {
    display: flex;
    margin-top: 84rpx;
    width: 280rpx;
    height: 62rpx;
    margin-left: 230rpx;
    background: #f2bb16;
    border-radius: 40rpx;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    text-align: center;
    line-height: 40rpx;
    color: #fff;
}
</style>
